<template> 
    <div class="user">
        <div class="head-bg">
            <image class="img"  src="https://rqys.hleason.com/dist/images/user_bg.png"></image> 
            <div class="content text-center">
                <div class="img-box">
                    <image class="img"  :src="userDate.avatar?'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+userDate.avatar:'https://rqys.hleason.com/dist/images/plh.png'"></image> 
                </div>
                <div class="name">{{userDate.user_name}}</div>
                <div class="capsule">{{userDate.level_txt}}</div>
            </div>
        </div>
        
        <div class="user-tabs text-center">
            <div class="tab-item" @click="jumpLink(1)">
                <p>{{detailState.count}}</p>
                <p class="info">动态</p>
            </div>
            <div class="tab-item" @click="jumpLink(2)">
                <p>{{detailState.attention}}</p>
                <p class="info">关注</p>
            </div>
            <div class="tab-item" @click="jumpLink(3)">
                <p>{{detailState.collect}}</p>
                <p class="info">赞</p>
            </div>
        </div>

        <div class="user-cell">
            <zan-cell-group title-width="90">
                <zan-cell title="我的预约" is-link url="./../jump-app/main">
                   <!-- <image slot="icon" class="icon-img" src="https://rqys.hleason.com/dist/images/me_yy.png"></image>-->   
                </zan-cell> 
                <zan-cell title="我的处方" is-link url="./../recipe/main">
                    <!--<image slot="icon" class="icon-img" src="https://rqys.hleason.com/dist/images/me_chufang.png"></image>  -->
                </zan-cell> 
                <zan-cell title="我的收藏" is-link url="./../collect/main">
                    <!--<image slot="icon" class="icon-img" src="https://rqys.hleason.com/dist/images/me_scc.png"></image>-->
                </zan-cell>
                <zan-cell title="浏览历史" is-link url="./../browse-history/main">
                    <!--<image slot="icon" class="icon-img" src="https://rqys.hleason.com/dist/images/me_ls.png"></image> -->  
                </zan-cell> 
                <div class="cell-item">
                    <zan-cell title="注册会员" is-link url="./../register-vip/main">
                       <!-- <image slot="icon" class="icon-img" src="https://rqys.hleason.com/dist/images/me_hy.png"></image> -->  
                    </zan-cell> 
                </div> 
                <div class="cell-item">
                    <zan-cell title="意见反馈" is-link url="./../feedback/main">
                        <!--<image slot="icon" class="icon-img" src="https://rqys.hleason.com/dist/images/me_hy.png"></image>-->     
                    </zan-cell> 
                </div>  
                <div class="cell-item" style="margin-bottom:20rpx;">
                    <zan-cell title="设置" is-link url="./../set-user/main">
                        <!--<image slot="icon" class="icon-img" src="https://rqys.hleason.com/dist/images/me_hy.png"></image>-->   
                    </zan-cell> 
                </div> 
            </zan-cell-group>
        </div>
    </div> 
</template>

<script> 
import * as api from '@/utils/api' 
export default {
    onShow(){ 
        // this.wxInfo=JSON.parse(wx.getStorageSync('wxInfo'));
        this.userDate=JSON.parse(wx.getStorageSync('userDate'));
        if(this.userDate.level=='level_one'){
            this.userDate.level_txt='游客'
        }else if(this.userDate.level=='level_two'){
            this.userDate.level_txt='初级会员'
        }else if(this.userDate.level=='level_three'){
            this.userDate.level_txt='高级会员'
        }
        this.getStateData();
    },
    data () {
        return {
            wxInfo:{},
            userDate:{},
            detailState:{}
        }
    },
    methods:{
        jumpLink(val){
            if(val==1){
                let url = `./../state-page/main`;
                wx.navigateTo({url}) 
            }else if(val==2){
                let url = `./../relev/main`;
                wx.navigateTo({url}) 
            }
        },
        //
        getStateData(){
            let vm = this;
            let body={
                model: "Users",
                with:{
                    "0":"collect",
                    "1":"attention",
                    "2":"count",
                    "3":"orderCount"
                },
                condition: {
                    id:wx.getStorageSync('u_id')
                }
            };
            api.getInfoById(body).then(res=>{
                if(res.data.code==200){
                    vm.detailState=res.data.data;
                }
            })
        },
    }, 
}

</script>
<style scoped lang="scss">
.user{
    .head-bg{
        width:100%;
        height:320rpx;
        position:relative;
        .img{
            width:100%;
            height:100%;
        }
        .content{
            position:absolute;
            top:60rpx;
            width:100%;
            .img-box{
                width:100rpx;
                height:100rpx;
                margin:0 auto;
                .img{
                    width:100%;
                    height:100%;
                    border-radius:50%;
                }
            }
            .name{
                color:#fff;
                font-size:30rpx;
                margin:15rpx 0;
            }
            .capsule{
                display:inline-block;
                padding:4rpx 20rpx;
                font-size:25rpx;
                background:red;
                color:#fff;
                border-radius:20rpx;
            }
        }
    }
    .user-tabs{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:Center; 
        font-size:26rpx;
        background:#fff;
        padding:16rpx 0;
        .tab-item{
            flex:1;
            .info{
                color:#949494;
            }
        }
    }
    .user-cell{
        margin-top:20rpx;
        .icon-img{
            width:40rpx;
            height:40rpx;
            vertical-align: middle;
        }
        .cell-item{
            margin-top:10rpx;
        }
    }
}
</style> 
